<template> 
     <div> 
      
      <Title :title="title"></Title>
      <div ref="chartContainer" style="height: 150px;"></div> 
     </div> 
    </template> 
     
    <script setup> 
    import Title from './Title.vue';
    const title=ref('氧气浓度'); 
    import { ref, onMounted, onUnmounted } from 'vue'; 
    import { Area } from '@antv/g2plot'; 
     
    
    const chartContainer = ref(null); 
    let chartInstance = null; 
     
    
    let humidityData = [ 
     { time: '00:00', wet: 21}, 
     { time: '01:00', wet: 21 }, 
     { time: '03:00', wet: 21 }, 
     { time: '04:00', wet: 22 }, 
     { time: '05:00', wet: 22 }, 
     { time: '06:00', wet: 22 }, 
     { time: '07:00', wet: 21 }, 
     { time: '08:00', wet: 21 }, 
     { time: '09:00', wet: 20 }, 
     { time: '10:00', wet: 19 }, 
     { time: '11:00', wet: 19 }, 
     { time: '12:00', wet: 17 }, 
     { time: '13:00', wet: 17 }, 
     { time: '14:00', wet: 16 }, 
     { time: '15:00', wet: 15 }, 
     { time: '16:00', wet: 16 }, 
     { time: '17:00', wet: 16 }, 
     { time: '18:00', wet: 15 }, 
     { time: '19:00', wet: 16 }, 
     { time: '20:00', wet: 16 }, 
     { time: '21:00', wet: 16 }, 
     { time: '22:00', wet: 18 }, 
     { time: '23:00', wet: 19 }, 
     { time: '24:00', wet: 20 }, 
    ]; 
    function fetchHumidityData() { 
     const index = Math.floor(Math.random() * humidityData.length); 
     humidityData[index].wet = Math.floor(Math.random() * 100); 
     if (chartInstance) { 
      chartInstance.changeData(humidityData); 
     } 
    } 
     
    function initChart() { 
     if (chartContainer.value) { 
      chartInstance = new Area(chartContainer.value, { 
       data: humidityData, 
       xField: 'time',  
       yField: 'wet', 
       areaStyle: { 
        fill: '#1890ff', 
        fillOpacity: 0.8, //
       }, 
       smooth: true, // 
       yAxis: { 
        label: { 
         formatter: (val) => `${val}%`,
        }, 
       }, 
       meta: { 
        time: { 
         alias: '时间', 
        }, 
        wet: { 
         alias: '湿度', 
        }, 
       }, 
      }); 
     
      chartInstance.render(); 
     } 
    } 
     
  
    onMounted(() => { 
     initChart(); 
   
    }); 
     
    </script> 
     
    <style scoped> 

    </style>